<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON格式化工具</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1><i class="fas fa-code"></i> JSON格式化工具</h1>
            <p>输入JSON数据，实时格式化并可导出数组数据到Excel</p>
        </header>

        <div class="main-content">
            <!-- 左侧：JSON输入区域 -->
            <div class="input-section">
                <div class="section-header">
                    <h2><i class="fas fa-edit"></i> JSON输入</h2>
                    <div class="input-controls">
                        <button id="clearBtn" class="btn btn-secondary">
                            <i class="fas fa-trash"></i> 清空
                        </button>
                        <button id="formatBtn" class="btn btn-primary">
                            <i class="fas fa-magic"></i> 格式化
                        </button>
                    </div>
                </div>
                <textarea 
                    id="jsonInput" 
                    placeholder="在此输入JSON数据...&#10;例如：&#10;{&#10;  &quot;users&quot;: [&#10;    {&quot;name&quot;: &quot;张三&quot;, &quot;age&quot;: 25},&#10;    {&quot;name&quot;: &quot;李四&quot;, &quot;age&quot;: 30}&#10;  ]&#10;}"
                ></textarea>
                <div class="input-status">
                    <span id="inputStatus" class="status-indicator">
                        <i class="fas fa-circle"></i> 等待输入
                    </span>
                </div>
            </div>

            <!-- 右侧：JSON树状显示区域 -->
            <div class="tree-section">
                <div class="section-header">
                    <h2><i class="fas fa-sitemap"></i> JSON树状结构</h2>
                    <div class="tree-controls">
                        <button id="expandAllBtn" class="btn btn-secondary">
                            <i class="fas fa-expand-arrows-alt"></i> 全部展开
                        </button>
                        <button id="collapseAllBtn" class="btn btn-secondary">
                            <i class="fas fa-compress-arrows-alt"></i> 全部折叠
                        </button>
                    </div>
                </div>
                <div id="jsonTree" class="json-tree"></div>
            </div>
        </div>

        <!-- 底部：数组数据表格显示区域 -->
        <div class="table-section" id="tableSection" style="display: none;">
            <div class="section-header">
                <h2><i class="fas fa-table"></i> 数组数据表格</h2>
                <div class="table-controls">
                    <span id="arrayPath" class="array-path"></span>
                    <button id="exportBtn" class="btn btn-success">
                        <i class="fas fa-file-excel"></i> 导出Excel
                    </button>
                    <button id="closeTableBtn" class="btn btn-secondary">
                        <i class="fas fa-times"></i> 关闭
                    </button>
                </div>
            </div>
            <div class="table-container">
                <table id="dataTable">
                    <thead id="tableHead"></thead>
                    <tbody id="tableBody"></tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html> 